<template>
    <div class="chat-item-container">
        <div class="message-wrapper" :style="{ justifyContent: item.isMy ? 'flex-end' : 'flex-start' }">
          <chat-info-word 
              :id="item.id"
              :length="length" 
              :index="index" 
              :headUrl="item.headUrl" 
              :isMy="item.isMy" 
              :nickname="item.nickname"
              :showTime="item.showTime" 
              :time="item.time" 
              :content="item.content" 
              :type="item.type" 
              :voiceDuration="item.voiceDuration" 
              :isPlaying="item.isPlaying" 
              :sendStatus="item.sendStatus"
              :avatarClick="avatarClick" />
          <chat-info-custom v-if="item.type === 'custom'" :content="item.content" />
        </div>
    </div>
</template>

<script lang="ts">
import chatInfoTime from './chat-info-time.vue';
import chatInfoWord from './chat-info-word.vue';
import chatInfoCustom from './chat-info-custom.vue';
import type { MessageItem } from '../im-type/im-message-item';
import type { PropType } from 'vue';
export default {
    name: 'chat-info-item',
    components: {
        chatInfoTime,
        chatInfoWord,
        chatInfoCustom
    },
    props: {
        item: {
            type: Object as PropType<MessageItem>,
            default: () => {},
            required: true
        },
        length: {
            type: Number,
            default: 0
        },
        index: {
            type: Number,
            default: 0
        },
        avatarClick: {
            type: Function,
            default: (id: number, isMy: boolean) => {
                
            }
        }
    },
    data() {
        return {
            bubbleWidth: 0
        };
    },
    methods: {
        handleBubbleWidth(width: number) {
            this.bubbleWidth = width;
        }
    }
}
</script>

<style scoped>
.chat-item-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0;
}

.message-wrapper {
  width: 100%;
  display: flex;
}
</style>
